<template>
  <el-form :model="form" label-width="120px" style="background: #fff;    padding: 50px;"> 
     
 	<el-form-item label="表名">

                        <el-select v-model="form.table" placeholder="Select">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
  
    </el-option>
  </el-select>  
  </el-form-item>
   	<el-form-item label="自定义控制器名">
 	<input class="el-input__inner" v-model="form.controller" type="text" 		style="width:100px">
  </el-form-item>
  
   	<el-form-item label="自定义模型名">
 	<input class="el-input__inner" v-model="form.model" type="text" 		style="width:100px">
  </el-form-item>
 	<el-form-item label="关联表">
 <!-- 数组 -->
					<div >
						<table style="width: 100%">
							<tr v-for="(arrayitem,arraykey) in form.relation" :key="arraykey">
								<tb style="width:100px">
									 
                                          <el-select v-model="arrayitem.relation" placeholder="Select">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="arrayitem.relation"
    >
      <span style="float: left">{{ item.label }}</span>
      <span
        style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        "
        >{{ item.value }}</span
      >
    </el-option>
  </el-select>  
								</tb>
								<tb style="width:100px">
								 
                                              
                                          <el-select v-model="arrayitem.relationmode" placeholder="Select">                              
                                        <el-option
                                        v-for="item in citiess"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="arrayitem.relationmode"
                                        >
                                        <span style="float: left">{{ item.label }}</span>
                                        <span
                                            style="
                                            float: right;
                                            color: var(--el-text-color-secondary);
                                            font-size: 13px;
                                            "
                                            >{{ item.value }}</span
                                        >
                                        </el-option>
                                    </el-select>  
				
								</tb>
								<tb style="width:100px">
									<input class="el-input__inner" v-model="arrayitem.relationforeignkey" type="text"
										style="width:100px">
								</tb>
								<tb style="width:100px">
									<input class="el-input__inner" v-model="arrayitem.relationprimarykey" type="text"
										style="width:100px">
								</tb>
								<tb style="width:100px">
									<input class="el-input__inner" v-model="arrayitem.relationfields" type="text"
										style="width:100px">
								</tb>
								<tb>
									<el-button @click="delDetailCol(form.relation,arraykey)" size="mini">删除</el-button>
								</tb>
							</tr>
						</table>
						<el-button @click="addDetailCol(form.relation)" size="mini">添加</el-button>
					</div>
                    </el-form-item>

	<el-form-item>
					<el-button type="primary" @click="onSubmit">修改</el-button>
				</el-form-item>

  </el-form>
</template>
 
<script>
import JmInput from "../../components/form/JmInput.vue"; 
export default {
  components: { JmInput },
  data() {
    return {
      form: {
         table: '',
         controller:'',
         model:'',
         force:1,
         fields:[],
          relation:[  ],
     
      },     cities:{},
          citiess:[
              {
              "value":"belongsto",
              "label":"belongsto",

          },
          {
              "value":"hasone",
              "label":"hasone",

          }
          ]
 
      
    };
  },
 mounted() {
    this.getDataList();
  },
   
  methods: {
     //删除,带上当前行的id即可row.id
    delDetailCol(array,index) {
     array.splice(index, 1);
    }, 
    addDetailCol(array){
 
    array.push({
          relationmode:"",
          relationforeignkey:"",
          relationprimarykey:"",
          relationfields:"",
        })
        ;
    },
    async getDataList() {
      try {
        const res = await this.$api.getDatabaseList(); 
        let ccc=[];
       
      res.forEach(element => {
         let cccz=[];
         cccz["value"]=element.name;
         cccz["label"]=element.comment;
         ccc.push(cccz);  
      });
         this.cities=ccc;

      console.log(  this.cities)
      } catch (error) {
        /*console.error(error);*/
      }
    },
    onSubmit(){
        	  res =  this.$api.command(this.form)
    }
  
  },
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>